<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>

    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all"/>
    <link rel="stylesheet" th:href="@{/css/public.css}" media="all"/>

</head>
<body>



<!--layui公共模块-->
<div>

    <!--添加和修改弹出层-->
    <div id="addOrUpdateDiv" style="display: none;padding: 10px;padding-right: 5%">
        <form action="" method="post" class="layui-form" id="dataFrm" lay-filter="dataFrm">
            <div class="layui-form-item">
<!--                <div class="layui-inline">-->
<!--                    <label class="layui-form-label">姓名</label>-->
<!--                    <div class="layui-input-block">-->
<!--                        <input type="hidden" name="id">-->
<!--                        <input type="text" name="name" lay-verify="required" autocomplete="off"-->
<!--                               class="layui-input input-radius" placeholder="请输入姓名">-->
<!--                    </div>-->
<!--                </div>-->
                <div class="layui-inline">
                    <label class="layui-form-label">天数</label>
                    <div class="layui-input-block">
                        <input type="text" name="day" lay-verify="required|number" autocomplete="off" class="layui-input input-radius" placeholder="请输入请假天数">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">手机号</label>
                    <div class="layui-input-block">
                        <input type="text" name="phone" lay-verify="required" autocomplete="off" class="layui-input input-radius" placeholder="请输入手机号">
                    </div>
                </div>

            </div>

            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">请假事由</label>
                    <div class="layui-input-block">
                        <textarea type="text" name="reason" style="width: 500px;height: 80px"  lay-verify="required" autocomplete="off" class="layui-input input-radius" placeholder="请输入请假原因"></textarea>
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">地址去向</label>
                    <div class="layui-input-block">
                        <textarea type="text" style="width: 500px;height: 100px" name="address" lay-verify="required" autocomplete="off" class="layui-input input-radius" placeholder="请输入去向经过地"></textarea>
                    </div>
                </div>
            </div>

<!--            <div class="layui-form">-->
<!--                <div class="layui-form-item">-->
<!--                    <div class="layui-inline">-->
<!--                        <label class="layui-form-label">检测时间</label>-->
<!--                        <div class="layui-input-inline">-->
<!--                            <input type="text" name="createTime" class="layui-input" lay-verify="required" id="test1" placeholder="yyyy-MM-dd HH:mm:ss">-->
<!--                        </div>-->
<!--                    </div>-->
<!--                    <div class="layui-inline">-->
<!--                        <label class="layui-form-label">报告时间</label>-->
<!--                        <div class="layui-input-inline">-->
<!--                            <input type="text" name="updateTime" class="layui-input" id="test2" placeholder="yyyy-MM-dd HH:mm:ss">-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->




            <div class="layui-form-item">
                <div class="layui-input-block" style="text-align: center;padding-right: 7%">
                    <button type="button" class="layui-btn layui-btn-radius" lay-submit="" lay-filter="doSubmit" id="doSubmit"><i
                            class="layui-icon layui-icon-search layui-icon-normal"></i>提交
                    </button>
                    <button type="reset" class="layui-btn layui-btn-radius layui-btn-warm"><i
                            class="layui-icon layui-icon-refresh"></i><span>重置</span>
                    </button>
                </div>
            </div>
        </form>
    </div>


<!--查询条件-->
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 15px;">
    <legend>搜索条件</legend>
</fieldset>
<form action="" method="post" id="searchFrm" lay-filter="searchFrm" class="layui-form">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-inline">
                <input type="text" name="name" class="layui-input input-radius"
                       placeholder="请输入姓名">
            </div>
        </div>
        <div class="layui-inline" style="text-align: center;padding-right: 15%;">
            <button type="button" class="layui-btn layui-btn-sm layui-btn-radius" lay-submit="" lay-filter="doSearch"><i
                    class="layui-icon layui-icon-search layui-icon-normal"></i>查询
            </button>
            <button type="reset" class="layui-btn layui-btn-sm layui-btn-radius layui-btn-warm"><i
                    class="layui-icon layui-icon-refresh"></i><span>重置</span>
            </button>
        </div>
    </div>
</form>

<!--数据表格-->
<div>
    <table class="layui-hide" id="menuTable" lay-filter="menuTable"></table>
    <div id="menuToolBar" style="display: none">
        <button type="button" lay-event="add"  class="layui-btn layui-btn-sm layui-btn-normal layui-btn-radius">
            <i class="layui-icon layui-icon-add-1"></i>去请假
        </button>
    </div>
    <div id="menuRowBar" style="display: none;">
        <button type="button" lay-event="update"  class="layui-btn layui-btn-sm layui-btn-radius"><i
                class="layui-icon layui-icon-edit"></i>同意
        </button>
        <button type="button" lay-event="delete"  class="layui-btn layui-btn-sm layui-btn-danger layui-btn-radius"><i
                class="layui-icon layui-icon-edit"></i>驳回
        </button>
    </div>
</div>

    <script type="text/javascript" th:src="@{/layui/layui.js}"></script>
    <script type="text/javascript" th:src="@{/layui_ext/dtree/dtree.js}"></script>
<script type="text/javascript">

    //提升数据表格的作用域，因为底下还有一个reloadTable方法
    var tableIns;

    layui.extend({
        dtree: '/layui_ext/dtree/dtree'
    }).use(['jquery', 'form', 'layer', 'laydate', 'table', 'layedit','dtree'], function () {
        var $ = layui.jquery;
        var form = layui.form;
        var layer = layui.layer;
        var table = layui.table;
        var dtree = layui.dtree;
        var laydate = layui.laydate;

        //常规用法
        laydate.render({
            elem: '#test1',
            type: 'datetime'
        });

        //常规用法
        laydate.render({
            elem: '#test2',
            type: 'datetime'
        });

        //初始化表格 加载数据
        tableIns = table.render({
            elem: "#menuTable",
            title: "核酸数据表格",
            url: "/approval/loadMyApproval",
            toolbar: "#menuToolBar",
            page: true,
            width:1700,
            height: "full-130",
            cols: [ [
                {field: 'id', title: 'ID', align: 'center',width:'80'},
                {field: 'username', title: '姓名', align: 'center',width:'100'},
                {field: 'reason', title: '请假事由', align: 'center',width:'250'},
                {field: 'day', title: '请假天数', align: 'center',width:'80'},
                {field: 'address', title: '请假去向', align: 'center',width:'300'},
                {field: 'phone', title: '手机号', align: 'center',width:'150'},
                {field: 'nodeStatus', title: '审批状态', align: 'center',width:'150',templet:function (d) {
                        if (d.nodeStatus == 0){
                            return '<span class="layui-badge layui-bg-cyan">未提交</span>'
                        }else if (d.nodeStatus == 1){
                            return '<span class="layui-badge layui-bg-orange">老师正在审核中</span>'
                        } else if (d.nodeStatus == 2){
                            return '<span class="layui-badge layui-bg-red">老师驳回</span>'
                        }else if (d.nodeStatus == 3){
                            return '<span class="layui-badge layui-bg-green">老师审核通过</span>'
                        }else if (d.nodeStatus == 4){
                            return '<span class="layui-badge layui-bg-orange">院系正在审核中</span>'
                        }else if (d.nodeStatus == 5){
                            return '<span class="layui-badge layui-bg-red">院系驳回</span>'
                        }else if (d.nodeStatus == 6){
                            return '<span class="layui-badge layui-bg-green">院系审核通过</span>'
                        }
                    }},
                {field: 'createTime', title: '提交时间', align: 'center',width:'180'
                    ,templet : "<div>{{layui.util.toDateString(d.createTime, 'yyyy-MM-dd HH:mm:ss')}}</div>"
                },
                {field: 'updateTime', title: '审批时间', align: 'center',width:'180'
                    ,templet : "<div>{{layui.util.toDateString(d.updateTime, 'yyyy-MM-dd HH:mm:ss')}}</div>"
                },
                {fixed: 'right', title: '操作', toolbar: '#menuRowBar', align: 'center',width:'200'}
            ] ],
            done: function (data, curr, count) {
                //不是第一页时，如果当前返回的数据为0那么就返回上一页
                if (data.data.length == 0 && curr != 1) {
                    tableIns.reload({
                        page: {
                            curr: curr - 1
                        }
                    })
                }
            }
        });

        //监控模糊查询按钮事件
        form.on("submit(doSearch)", function (data) {
            tableIns.reload({
                where: data.field,
                page: {
                    curr: 1
                }
            });
            return false;
        });

        //监控工具条事件
        table.on("toolbar(menuTable)", function (obj) {
            switch (obj.event) {
                case 'add':
                    openAddLayer();
                    break;
            };
        });

        //监控行工具条事件
        table.on("tool(menuTable)", function (obj) {
            //获取当前行数据
            var data = obj.data;
            switch (obj.event) {
                case 'delete':
                    deleteMenu(data);
                    break;
                case 'update':
                    updateMenu(data);
                    break;
            };
        });

        var mainIndex;
        var url;

        //打开添加弹出层
        function openAddLayer() {
            mainIndex = layer.open({
                type:1,
                content:$("#addOrUpdateDiv"),
                area:['800px','450px'],
                title:'添加菜单',
                success:function () {
                    $("#dataFrm")[0].reset();
                    //设置下拉树中父节点的值为空
                    $("#pid").val("");
                    url="/approval/addApproval";
                }
            });
        }

        //打开修改的弹出层
        function updateMenu(data) {

            layer.confirm('你确定要同意【' + data.id + '】这个审批吗？', {icon: 3, title: '提示'}, function (index) {
                $.post("/approval/successApproval", {id: data.id},function (res) {
                    if (res.code == 200) {
                        tableIns.reload({
                            where:"",
                        });
                    }
                    layer.msg(res.msg);
                });
                layer.close(index);
            });



            // mainIndex = layer.open({
            //     type:1,
            //     content:$("#addOrUpdateDiv"),
            //     area:['800px','450px'],
            //     title:'修改菜单',
            //     success:function () {
            //         //清空原有的数据
            //         $("#dataFrm")[0].reset();
            //         //装载新的数据
            //         form.val("dataFrm",data);
            //         url="/approval/successApproval";
            //     }
            // });
        }

        form.on("submit(doSubmit)",function (data) {
            $.post(url,data.field,function (res) {
                if (res.code==200){
                    tableIns.reload();
                }
                layer.msg(res.msg);
                layer.close(mainIndex);
            });
            return false;
        });

        //删除
        function deleteMenu(data) {
            layer.confirm('你确定要驳回【' + data.id + '】这个审批吗？', {icon: 3, title: '提示'}, function (index) {
                $.post("/approval/rejectApproval", {id: data.id},function (res) {
                    if (res.code == 200) {
                        tableIns.reload({
                            where:"",
                        });
                    }
                    layer.msg(res.msg);
                });
                layer.close(index);
            });

        }



    });

    //给其它页面刷新当前页面数据表格的方法
    function reloadTable(id) {
        tableIns.reload({
            where:{
                id:id
            },
            page:{
                curr:1
            }
        });
    }

</script>
</div>
</body>
</html>